<template>
	<view class="" :style="{'--themcolor':usethemestore.themecolor,'--themcolor2':usethemestore.themecolor2}" v-if="productdata&&shopperdata">
		<view class="pro-item" @click="productxq">
			<view class="item-top">
				<view class="item-top-l">
					<image :src="'http://127.0.0.1:3006'+shopperdata.img" mode="aspectFill"></image>
					<view class="">{{shopperdata.dname}}</view>
				</view>
				<view class="item-top-r">{{stautsdata}}</view>
			</view>
			<view class="item-bottom">
				<view class="b-l"></view>
				<view class="b-r">
					<view class="b-r-t">
						<view class="l">
							<image :src="'http://127.0.0.1:3006'+productdata.img" mode="aspectFill"></image>
							<view class="l-r">
								<view class="l-r-t">{{productdata.title}}</view>
								<view class="l-r-b" v-if="!islove" @click.stop="s_love(true)">
									<view class="iconfont icon-xingxing"></view> 收藏
								</view>
								<view class="l-r-b" v-else @click.stop="s_love(false)">
									<view class="iconfont icon-xingxing1"></view> 已收藏
								</view>
							</view>
						</view>
						<view class="r">x{{data.sum}}</view>
					</view>
					<view class="b-r-b">
						<view class="b-r-b-t">
							共1件商品，实付 <text>￥{{data.allprice}}</text>
						</view>
						<view class="b-r-b-b">
							<!-- 								<view class="">再来一单</view> -->
							<view v-if="!data.status" class="" @click.stop="zforder">立即支付</view>
							<view v-if="!data.status" @click.stop="zforder_qx" class="">取消订单</view>
							<view v-if="data.status==1"  class="" @click.stop="adinproduct">再来一单</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<aixinVue color="#52acff" v-if="aixinshow" />
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import aixinVue from '../aixin/aixin.vue'
	import themestore from '@/store/theme.js'
	import {getbyids,islovesss,setlovess,dellovess,ssetorderstatus} from '@/api/index.js'
	import userstore from '@/store/user.js'
	const useuserstore=userstore()
	const prop=defineProps(['data'])
	const emit =defineEmits(['gengxin'])
	console.log(prop.data.productid)
	const usethemestore = themestore()
	const islove = ref(false)
	const aixinshow = ref(false)
	const shopperdata=ref()
	const productdata=ref()
	onMounted(()=>{
		getproductdata()

	})
	const adinproduct=()=>{
		uni.navigateTo({
			url:`/pages/producet-xq/producet-xq?userid=${shopperdata.value.id}&id=${productdata.value.id}`
		})
	}
	const zforder_qx=async()=>{
		const rudata=await ssetorderstatus({orderid:prop.data.orderid, status:2})
		if(rudata.code==200){
			uni.showToast({
				title:"取消成功！",
				icon:"none"
			})
			emit('gengxin')
		}
	}
	const getislovesss=async()=>{
		 const rudata=await islovesss(useuserstore.userinfo.id,productdata.value.id)
		 if(rudata.code==200){
			 islove.value=rudata.data
		 }
	}
	const stautsdata=computed(()=>{
		switch(prop.data.status){
			case 0:return "未付款"
			case 1:return "已付款"
			case 2:return "已取消"
		}
	})
	const getproductdata=async()=>{
		const rudata=await getbyids({id:prop.data.productid})
		if(rudata.code==200){
			shopperdata.value=rudata.getdata
			productdata.value=rudata.productdata
					getislovesss()
		}
	}
	const productxq = () => {
		uni.navigateTo({
			url: `/pages/orderxq/orderxq?data=${JSON.stringify({...shopperdata.value,...productdata.value,...prop.data})}`
		})
	}
	const s_love =async e => {
	if (e) {
		const rudata = await setlovess(useuserstore.userinfo.id, productdata.value.id)
		if (rudata.code == 200) {
			aixinshow.value = true
			islove.value = e
			setTimeout(() => {
				aixinshow.value = false
			}, 1000)
		}
		return
	}
	const rudata = await dellovess(useuserstore.userinfo.id, productdata.value.id)
	if (rudata.code == 200) {
		islove.value = e
	}
}
	const zforder = () => {
		uni.navigateTo({
			url: `/pages/zf-order/zf-order?data=${JSON.stringify({...prop.data,shopername:shopperdata.value.dname})}`
		})
	}
</script>

<style lang="scss" scoped>
	.pro-item {
		width: 100%;
		height: 400rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 15rpx;
		overflow: hidden;
		padding: 0 25rpx;

		.item-top {
			overflow: hidden;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item-top-l {
				display: flex;
				align-items: center;
				gap: 20rpx;

				image {
					height: 80rpx;
					width: 80rpx;
					border-radius: 10rpx;
				}

				>view {
					font-size: 32rpx;
					font-weight: 700;
				}
			}

			.item-top-r {
				font-size: 30rpx;
				color: #4f4f4f;
			}
		}

		.item-bottom {
			height: 280rpx;
			overflow: hidden;
			display: flex;

			.b-l {
				width: 100rpx;
			}

			.b-r {
				width: calc(100% - 100rpx);
				border-top: 1rpx solid #d6d8dd;
				height: 100%;

				.b-r-t {
					height: 50%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.l {
						display: flex;
						align-items: center;
						gap: 15rpx;

						image {
							height: 120rpx;
							width: 120rpx;
							border-radius: 15rpx;
						}

						.l-r {
							font-size: 27rpx;
							display: flex;
							flex-direction: column;
							gap: 15rpx;

							.l-r-t {
								color: #4f4f4f;
								width: 320rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.l-r-b {
								width: fit-content;
								display: flex;
								padding: 7rpx 15rpx;
								border: 1rpx solid #9b9da1;
								border-radius: 15rpx;
								font-size: 25rpx;
								align-items: center;
								gap: 5rpx;

								.iconfont {
									font-size: 25rpx;
									color:var(--themcolor);
								}
							}
						}
					}

					.r {
						font-size: 28rpx;
					}
				}

				.b-r-b {
					height: 50%;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					justify-content: space-around;

					.b-r-b-t {
						font-size: 25rpx;
						color: #4f4f4f;

						text {
							font-size: 27rpx;
							font-weight: 700;
							color: #000;
						}
					}

					.b-r-b-b {
						display: flex;
						gap: 40rpx;

						>view {
							padding: 10rpx 25rpx;
							font-size: 28rpx;
							border: 1rpx solid #9b9da1;
							border-radius: 20rpx;
						}
					}
				}

			}
		}
	}
</style>